<form id="create_attr" method="post">
    <div class="col-xs-12 col-md-12 col-lg-12 padding-none lists">
        <div class="col-lg-2 col-md-3 col-xs-5 filed-name text-right">选择父级 :</div>
        <div class="col-lg-3 col-md-5 col-xs-7 filed-from padding-none">
            <select class="form-control radius-none _data" name="category_id">
                <?php echo $category_tree?>
            </select>
        </div>
    </div>
    <div class="col-xs-12 col-md-12 col-lg-12 padding-none lists">
        <div class="col-lg-2 col-md-3 col-xs-5 filed-name text-right">属性名称<pub>*</pub> :</div>
        <div class="col-lg-3 col-md-5 col-xs-7 filed-from padding-none">
            <input name="attr_name" type="text" autocomplete="off" class="form-control radius-none _data" >
        </div>
    </div>
    <div class="col-xs-12 col-md-12 col-lg-12 padding-none lists">
        <div class="col-lg-2 col-md-3 col-xs-5 filed-name text-right">属性值:<pub>*</pub> :</div>
        <div class="col-lg-10 col-md-9 col-xs-7 padding-none">
            <div class="col-lg-12 padding-none tags" style="display: none">
            </div>
            <div class="col-lg-12 padding-none">
                <div class="input-group" id="create_attr_val">
                    <input type="text" class="form-control radius-none" placeholder="添加多个使用空格分开">
                    <span class="input-group-btn">
                        <button class="btn btn-default radius-none" type="button">添加</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-md-12 col-lg-12 lists text-right">
        <input type="submit" name="dosubmit" value="保存" class="btn btn-success radius-none">
    </div>
</form>
<script>

    $(function(){

        //添加一个属性值
        $('button','#create_attr_val').unbind('click');
        $('button','#create_attr_val').click(function(){

            var attr_val = $('input','#create_attr_val').val();

            if(!attr_val){

                layer.msg('属性值不能为空',function(){});
                return false;;
            }

            attr_val = $.trim(attr_val);

            var attr_val = attr_val.split(/\s+/);

            for(var i in attr_val){

                $('.tags').append('\
\
            <div class="tag">\
                    <div class="name">'+attr_val[i]+'</div>\
                    <div class="del"><i class="fa fa-close"></i></div>\
            </div>\
            <input type="hidden" value="'+attr_val[i]+'">\
                    \
            ');

            }

            $('input','#create_attr_val').val('');

            $('#create_attr_val').parent().prev().show();

        });

        //删除一个属性值
        $('.tags').undelegate('.tag>.del','click');
        $('.tags').delegate('.tag>.del','click',function(){

            var _this = $(this);

            layer.msg('确定删除吗？', {
                time: 0 //不自动关闭
                ,btn: ['删除', '关闭']
                ,yes: function(index){

                    layer.close(index);

                    _this
                            .parent()
                            .fadeOut(200,function(){

                                $(this).remove();

                            })

                    if($('.tags > .tag').length < 1)
                        $('#create_attr_val').parent().prev().hide();
                }
            });

        });

        //提交数据
        $('form#create_attr').submit(function(){

            var data = {};

            data.attr = $('[name="attr_name"]').val();

            data.category_id = $('[name="category_id"]').val()

            if(!data.category_id){

                layer.msg('请选择分类!',function(){});

                return false;

            }
            if(!data.attr){

                layer.msg('属性名称不能为空!',function(){});

                return false;

            }

            data.attr_val = [];

            if($('.tags > input').length < 1){

                layer.msg('至少添加一个属性值!',function(){});

                return false;

            }

            $('.tags > input').each(function(i){

                data.attr_val[i] = $(this).val();

            })

            layer.load();

            $.post("<?php echo U('Admin/Goods/Attr/create')?>",{'data':data},function(result){

                layer.closeAll();

                if(result.code == 200){

                    layer.msg(result.msg);

                }else{
                    layer.msg(result.msg,function(){});
                }

            });

            return false;
        });
    });

</script>